<template>
<div>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple-light">
        <template>
          <el-carousel indicator-position="outside" height="600px">
            <el-carousel-item v-for="item in imgs" :key="item">
              <el-image
              style="display: flex;
              align-items: center;
              justify-content: center;
              width: 100%; height: 100%"
              :src="item"
              fit="scale-down"></el-image>
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>
    </el-col>
  </el-row>
</div>
</template>

<script>
import homeImg1 from "../../assets/indexIamges/1.jpg"
import homeImg2 from "../../assets/indexIamges/2.jpg"
import homeImg3 from "../../assets/indexIamges/3.jpg"
import homeImg4 from "../../assets/indexIamges/4.jpg"
export default {
    name:'Dashboard',
    data() {
        return {
            imgs: [homeImg1,homeImg2,homeImg3,homeImg4]
        }
    }
}
</script>